import { createRouter, createWebHashHistory } from "vue-router";
import Login from "@/views/Login.vue";
import MainBox from "@/views/MainBox.vue";
import RoutesConfig from "./config";
import store from "@/store";
const routes = [
  {
    path: "/login",
    name: "login",
    component: Login,
  },
  {
    path: "/mainbox",
    name: "mainbox",
    component: MainBox,
  },
];

// mainbox的嵌套路由，后面根据权限动态添加
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守卫
router.beforeEach(async (to, from, next) => {
  if (to.name === "login") {
    next();
  } else {
    // 如果授权（登录过了），就放行
    // 如果未授权，就重定向到login
    if (!localStorage.getItem("token")) {
      next({
        path: "login",
      });
    } else {
      // 这里需要注意，我们需要判断是否是第一次进来，第一次进来的时候我们才帮他添加路由
      if (!store.state.user.isGetterRouter) {
        ConfigRouter();
        // 必须再走一遍路径，不能直接next()
        next({
          path: to.fullPath,
        });
      } else {
        next();
      }
    }
  }
});

const ConfigRouter = () => {
  // 同台添加路由
  RoutesConfig.forEach((item) => {
    router.addRoute("mainbox", item);
  });

  // 添加完路由后，就不是第一次进来了，我们就需要修改变量
  store.commit("user/changeGetterRouter", true);
};

// 解决重复点击路由编程报错
const push = router.push;
router.push = function (path) {
  return push.call(this, path).catch((err) => err);
};

export default router;
